import { useState } from 'react'
import { useNavigate, useLocation, useParams } from 'react-router-dom'
import Nabar from '../../conpoment/Nabar'
import styles from './index.module.css'
import http from '../../api/index'
import { Avatar, Button, Radio } from 'antd-mobile'

function AppointmentConfirm() {
  const navigate = useNavigate()
  const location = useLocation()
  const { price } = useParams()
  // 从路由参数或location.state获取预约信息
  const appointmentData = location.state || {
    doctorId: 1,
    doctorName: '刘医生',
    doctorTitle: '主任医师',
    department: '门诊外一科',
    hospital: '四川省保健院南苑',
    doctorAvatar: 'https://ts1.tc.mm.bing.net/th/id/OIP-C.WJlM1ncsKLaS1d99La0ErwHaHa?w=176&h=211&c=8&rs=1&qlt=90&o=6&cb=12&dpr=1.2&pid=3.1&rm=2',
    appointmentDate: '2020-01-27',
    appointmentTime: '08:30-12:00',
    timeSlot: '上午',
    registrationFee: price ? parseFloat(price) : 66.00
  }
  // 患者信息
  const [patientInfo] = useState({
    name: '王小柯',
    id: '123456789012345678'
  })
  // 支付方式
  const [paymentMethod, setPaymentMethod] = useState('self-pay')
  const handlePatientSelect = () => {
    console.log('选择就诊人')
    // 这里可以跳转到患者选择页面
  }
  const handlePaymentMethodChange = (value: string) => {
    setPaymentMethod(value)
  }
  const handlePayment = async () => {
    // 处理支付逻辑
    console.log('开始支付，价格:', price)
    try {
      // 模拟支付API调用
      await http.get('/api/pay', {
        params: {
          price: price,
          id: Date.now(),
          title: `挂号费-${appointmentData.doctorName}`,
          body: `${appointmentData.department}-${appointmentData.appointmentDate} ${appointmentData.appointmentTime}`
        }
      })
      // 模拟支付成功后跳转到支付成功页面
      setTimeout(() => {
        navigate('/payment_success', {
          state: {
            amount: parseFloat(price || '20'),
            paymentMethod: '支付宝',
            accountBalance: 158.50,
            orderId: `ORDER_${Date.now()}`,
            doctorName: appointmentData.doctorName,
            department: appointmentData.department,
            appointmentDate: appointmentData.appointmentDate,
            appointmentTime: appointmentData.appointmentTime
          }
        })
        navigate('/payment_success')
      }, 2000) // 模拟2秒支付过程
      
      // 实际项目中这里应该跳转到真实的支付宝页面
      // if (res.data && res.data.result) {
      //   window.location.href = res.data.result
      // }
    } catch (error) {
      console.error('支付请求失败:', error)
      alert('支付请求失败，请重试')
    }
  }

  return (
    <div className={styles.page}>
      <Nabar title='确认预约' sticky={false} />
      
      <div className={styles.content}>
        {/* 医生信息卡片 */}
        <div className={styles.doctorCard}>
          <Avatar src={appointmentData.doctorAvatar} className={styles.doctorAvatar} />
          <div className={styles.doctorInfo}>
            <div className={styles.doctorNameRow}>
              <span className={styles.doctorName}>{appointmentData.doctorName}</span>
              <span className={styles.doctorTitle}>{appointmentData.doctorTitle}</span>
            </div>
            <div className={styles.doctorDepartment}>{appointmentData.department}</div>
            <div className={styles.doctorHospital}>{appointmentData.hospital}</div>
          </div>
        </div>

        {/* 预约详情卡片 */}
        <div className={styles.appointmentCard}>
          <div className={styles.appointmentItem}>
            <span className={styles.label}>预约时间</span>
            <span className={styles.value}>
              {appointmentData.appointmentDate} {appointmentData.appointmentTime}({appointmentData.timeSlot})
            </span>
          </div>
          <div className={styles.appointmentItem}>
            <span className={styles.label}>就诊科室</span>
            <span className={styles.value}>{appointmentData.department}</span>
          </div>
          <div className={styles.appointmentItem}>
            <span className={styles.label}>挂号费用</span>
            <span className={styles.feeValue}>¥{appointmentData.registrationFee.toFixed(2)}</span>
          </div>
        </div>

        {/* 就诊人信息卡片 */}
        <div className={styles.patientCard} onClick={handlePatientSelect}>
          <span className={styles.label}>就诊人</span>
          <div className={styles.patientInfo}>
            <span className={styles.patientName}>{patientInfo.name}</span>
          </div>
        </div>

        {/* 支付方式卡片 */}
        <div className={styles.paymentCard}>
          <div className={styles.paymentTitle}>支付方式</div>
          <div className={styles.paymentOptions}>
            <div 
              className={styles.paymentOption}
              onClick={() => handlePaymentMethodChange('self-pay')}
            >
              <span className={styles.optionLabel}>自费支付</span>
              <Radio 
                checked={paymentMethod === 'self-pay'}
                onChange={() => handlePaymentMethodChange('self-pay')}
              />
            </div>
            <div 
              className={styles.paymentOption}
              onClick={() => handlePaymentMethodChange('insurance')}
            >
              <span className={styles.optionLabel}>医保支付</span>
              <Radio 
                checked={paymentMethod === 'insurance'}
                onChange={() => handlePaymentMethodChange('insurance')}
              />
            </div>
          </div>
        </div>
      </div>

      {/* 底部确认按钮 */}
      <div className={styles.bottomButton}>
        <Button 
          block 
          color='primary' 
          size='large'
          onClick={handlePayment}
          className={styles.confirmBtn}
        >
          确认支付
        </Button>
      </div>
    </div>
  )
}
export default AppointmentConfirm